<template>
  <div class="baseInfo">
    <el-form label-position="left" label-width="80px">
      <el-form-item label="头像">
        <div class="presonPic">
          <img v-if="selectFileOrNot" :src="previewImgURL" class="avatar">
          <uploader :options="uploadOptions" :autoStart="true" ref="uploader" :file-status-text="statusText" @files-submitted="fileSubmit" @file-removed="fileRemoved" @file-success="fileSuccess" @file-error="fileFail" class="uploader-broadcast">
            <uploader-unsupport></uploader-unsupport>
            <uploader-btn :directory="false" :attrs="attrs" :single="true">
              <i class="tipWord">替换</i>
            </uploader-btn>
          </uploader>
        </div>
      </el-form-item>
      <el-form-item label="登录账户">
        <el-input disabled v-model="loginAccount"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model.trim="name" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <template>
          <el-radio-group v-model="sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </template>
      </el-form-item>
      <el-form-item label="个人简介" class="introduce-item">
        <el-input type="textarea" :rows="6" resize="none" v-model="autograph" placeholder="将你独特的一面展示给大家吧~" maxlength="60">
        </el-input>
        <span class="word-sum">
          <i>{{autograph.length}}</i><i>/60</i></span>
      </el-form-item>
      <el-form-item class="submit-item">
        <el-button type="primary" size="medium" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginAccount: "",
      name: "",
      autograph: "",
      sex: "0",
      user_id:null,
      // 头像
      statusText: {
        success: "上传成功",
        error: "上传出错",
        uploading: "正在上传...",
        paused: "暂停",
        waiting: "等待上传"
      },
      selectFileOrNot: false, //是否选中文件
      uploadOrNot: false, //是否已经上传
      uploadInfo: {
        file_name: "",
        file_path: "",
        file_size: 0
      },
      attrs: {
        accept: ["image/*"]
      },
      uploadOptions: {
        target: this.BASE_URL + "/api/resource/res_upload",
        testChunks: false,
        headers: { Authorization: `Bearer ` + this.$g.access_token }
      },
      selectFileShow: true, //是否显示选择文件按钮
      uploadRetryTimes: 100, //文件最大重传次数
      previewImgURL: ""

    }
  },
  created() {
    this.getinfo();
  },
  mounted() {
  },
  methods: {
    getinfo() {
      let success = res => {
        this.loginAccount = res.data.userinfo.number;
        this.name = res.data.userinfo.name;
        this.sex = res.data.userinfo.sex;
        this.user_id = res.data.userinfo.id;
        this.autograph = res.data.userinfo.autograph;
        this.uploadInfo.file_path = res.data.userinfo.avatar_path;
        if (res.data.userinfo.avatar_path != "") {
          this.previewImgURL = this.BASE_URL + res.data.userinfo.avatar_path;
          this.selectFileOrNot = true;
        }
      };
      this.$ajax({
        url: "api/login/new_login",
        method: "get",
        params: {

        },
        func: { success: success }
      });
    },
    submit() {
      if (this.name == "") {
        this.$message.warning("真实姓名不能为空哦");
        return false;
      }
      let success = res => {
        this.$message.success("提交成功");
        this.getinfo();
      };
      this.$ajax({
        url: "api/login/change_user_message",
        method: "put",
        data: {
          name: this.name,
          autograph: this.autograph.trim()===''?'':this.autograph,
          avatar_path: this.uploadInfo.file_path,
          sex: this.sex,
          user_id: this.user_id,
        },
        func: { success: success }
      });
    },
    //上传成功的事件
    fileSuccess(rootFile, file, message, chunk) {
      var mess = eval("(" + message + ")");
       mess = handleResponseData(mess);
      if (parseInt(mess.data.status) === 1) {
        this.uploadOrNot = true;
        this.uploadInfo.file_name = mess.data.file_name;
        this.uploadInfo.file_path = mess.data.file_path;
        this.uploadInfo.post_fix = mess.data.post_fix;
        // console.log(this.uploadInfo.file_path);
      }
    },
    fileFail(rootFile, file, message, chunk) {
      var mess = eval("(" + message + ")");
      if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
        let callbcak = data => {
          this.uploadRetryTimes--;
          this.$refs.uploader.uploader.retry(file);
        };
        this.get_access_token(callbcak);
      } else {
        this.$message.error(mess.msg);
      }
    },
    //过滤文件格式
    fileSubmit(files, fileList, event) {
      for (var i = 0; i < fileList.length; i++) {
        if (fileList[i].fileType.indexOf("image/") === -1) {
          this.$message.warning("只允许上传图片格式的文件");
          this.$refs.uploader.uploader.removeFile(fileList[i]);
        } else if (fileList[i].size > 10240000) {
          this.$message.warning("只允许上传10M以内的文件");
          this.$refs.uploader.uploader.removeFile(fileList[i]);
        } else {
          if (this.$refs.uploader.uploader.fileList.length > 1) {
            //删除第一张图片
            this.$refs.uploader.uploader.removeFile(
              this.$refs.uploader.uploader.fileList[0]
            );
          }
          this.previewImgURL = window.URL.createObjectURL(
            fileList[i].file
          );
          // this.ruleForm.select_or_not = "1";
          this.uploadInfo.file_size = fileList[i].size;
          this.selectFileOrNot = true;
          this.selectFileShow = false;
        }
      }
    },
    fileRemoved(file) {
      // this.ruleForm.select_or_not = "";
      this.selectFileOrNot = false;
      this.selectFileShow = true;
    },
    fileUpload() {
      this.$refs.uploader.uploader.upload();
    }


  }
}
</script>

<style lang="scss">
.baseInfo {
  padding-top: 60px;
  .introduce-item {
    .el-form-item__content {
      position: relative;
    }
    .word-sum {
      position: absolute;
      right: 20px;
      bottom: 6px;
      i:nth-child(2) {
        color: #c0c4cc;
      }
    }
  }
  .submit-item {
    padding-top: 50px;
    text-align: center;
  }
}
//上传头像
.presonPic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background-color: #f5f7fa;
  position: relative;
  > img {
    width: 100%;
    height: 100%;
  }
  .uploader {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
  }
  .uploader-btn {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    text-align: center;
    .tipWord {
      display: inline-block;
      text-align: center;
      width: 100%;
      height: 100%;
      line-height: 60px;
      color: #fff;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
  }
  &:hover .tipWord {
    opacity: 1;
  }
}
</style>